<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box{
			width: 700px;
			height: 500px;
			background: #fff;
			margin:200px auto 0;
			border-radius: 20px;
			/*box-shadow:0 1px 4px rgba(0, 0, 0, 0.8),0 0 40px rgba(0, 0, 0, 0.8) inset;*/
		}
		.box1:hover{
		/*	filter:hue-rotate(90deg);
        	-webkit-filter:hue-rotate(90deg);*/
        	box-shadow:0 1px 4px rgba(0, 0, 0, 0.8),0 0 40px rgba(0, 0, 0, 0.8);
        	width: 710px;
        	height: 510px;
        	 filter:blur(2px);
        	 transition:all 1s;
        	-webkit-filter:blur(2px);
		}
	</style>
</head>
<body style="background:#ccc;">
	<div class="box"></div>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
	$(".box").hover(function(){
		$(this).addClass("box1");
		// $(this).css({left:X,top:y})
	},function(){
		$(this).removeClass("box1");
	});
</script>
</html>